import { Card, Form, Input, Button, message } from 'antd'
import React from 'react'
import { useEffect } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { reqAddHospital, reqGetHospital, reqUpdateHospital } from '@/api/hospital/hospitalSet'
import { IAddHospitalParam } from '@/api/hospital/model/hospitalSetTypes'
import { useForm } from 'antd/lib/form/Form'

export default function AddorUpdateHospital() {
    const navigate = useNavigate()
    const [form] = useForm()
    const param = useParams()
    const id = +(param.id as string)
    const onFinish = async (field: IAddHospitalParam) => {
        console.log('field', field)
        debugger
        if (id) {
            await reqUpdateHospital({
                ...field,
                id
            })
        } else {
            await reqAddHospital({ ...field })
        }
        message.success((id ? '修改' : '添加') + '医院成功')
        navigate('/syt/hospital/hospitalSet')
    }

    useEffect(() => {
        console.log('添加医院挂载了')
        // 添加医院不用发，修改医院才需要发
        if (id) {
            getHospitalById(id)
        }
    }, [])

    // 获取医院数据
    const getHospitalById = async (id: number) => {
        const hospital = await reqGetHospital(id)
        form.setFieldsValue(hospital)
    }

    // 返回
    const backHandler = () => {
        navigate(-1)
    }

    return (
        <Card>
            <Form
                name="basic"
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 16 }}
                onFinish={onFinish}
                form={form}
            >
                <Form.Item
                    label="医院名称"
                    name="hosname"
                    rules={[{ required: true, message: '请输入医院名称' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="医院编号"
                    name="hoscode"
                    rules={[{ required: true, message: '请输入医院编号' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="api基础路径"
                    name="apiUrl"
                    rules={[{ required: true, message: '请输入api基础路径' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="联系人姓名"
                    name="contactsName"
                    rules={[{ required: true, message: '请输入联系人姓名' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="联系人手机"
                    name="contactsPhone"
                    rules={[{ required: true, message: '请输入联系人手机' }, { pattern: /^1[0-9]{10}$/, message: '请输入合法的手机号' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" htmlType="submit">
                        保存
                    </Button>
                    <Button onClick={backHandler}>
                        返回
                    </Button>
                </Form.Item>
            </Form>
        </Card>
    )
}
